doctype html
html.app(lang='en')
  head
    meta(charset='utf-8')
    title Musik | Web Application
    meta(name='description', content='app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav')
    meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1')
    link(rel='stylesheet', href='js/jPlayer/jplayer.flat.css', type='text/css')
    link(rel='stylesheet', href='css/bootstrap.css', type='text/css')
    link(rel='stylesheet', href='css/animate.css', type='text/css')
    link(rel='stylesheet', href='css/font-awesome.min.css', type='text/css')
    link(rel='stylesheet', href='css/simple-line-icons.css', type='text/css')
    link(rel='stylesheet', href='css/font.css', type='text/css')
    link(rel='stylesheet', href='css/app.css', type='text/css')
    //if lt IE 9
      script(src='js/ie/html5shiv.js')
      script(src='js/ie/respond.min.js')
      script(src='js/ie/excanvas.js')
  body
    section.vbox
      header.bg-white-only.header.header-md.navbar.navbar-fixed-top-xs
        .navbar-header.aside.bg-info.dk
          a.btn.btn-link.visible-xs(data-toggle='class:nav-off-screen,open', data-target='#nav,html')
            i.icon-list
          |
          a.navbar-brand.text-lt(href='index.html')
            i.icon-earphones
            |
            img.hide(src='images/logo.png', alt='.')
            |
            span.hidden-nav-xs.m-l-sm Musik
          |
          a.btn.btn-link.visible-xs(data-toggle='dropdown', data-target='.user')
            i.icon-settings
        |
        ul.nav.navbar-nav.hidden-xs
          li
            a.text-muted(href='#nav,.navbar-header', data-toggle='class:nav-xs,nav-xs')
              i.fa.fa-indent.text
              |
              i.fa.fa-dedent.text-active
        |
        form.navbar-form.navbar-left.input-s-lg.m-t.m-l-n-xs.hidden-xs(role='search')
          .form-group
            .input-group
              span.input-group-btn
                button.btn.btn-sm.bg-white.btn-icon.rounded(type='submit')
                  i.fa.fa-search
              |
              input.form-control.input-sm.no-border.rounded(type='text', placeholder='Search songs, albums...')
        |
        .navbar-right
          ul.nav.navbar-nav.m-n.hidden-xs.nav-user.user
            li.hidden-xs
              a.dropdown-toggle.lt(href='#', data-toggle='dropdown')
                i.icon-bell
                |
                span.badge.badge-sm.up.bg-danger.count 2
              |
              section.dropdown-menu.aside-xl.animated.fadeInUp
                section.panel.bg-white
                  .panel-heading.b-light.bg-light
                    strong
                      | You have
                      span.count 2
                      |  notifications
                  |
                  .list-group.list-group-alt
                    a.media.list-group-item(href='#')
                      span.pull-left.thumb-sm
                        img.img-circle(src='images/a0.png', alt='...')
                      |
                      span.media-body.block.m-b-none
                        | Use awesome animate.css
                        br
                        |
                        small.text-muted 10 minutes ago
                    |
                    a.media.list-group-item(href='#')
                      span.media-body.block.m-b-none
                        | 1.0 initial released
                        br
                        |
                        small.text-muted 1 hour ago
                  |
                  .panel-footer.text-sm
                    a.pull-right(href='#')
                      i.fa.fa-cog
                    |
                    a(href='#notes', data-toggle='class:show animated fadeInRight') See all the notifications
            |
            li.dropdown
              a.dropdown-toggle.bg.clear(href='#', data-toggle='dropdown')
                span.thumb-sm.avatar.pull-right.m-t-n-sm.m-b-n-sm.m-l-sm
                  img(src='images/a0.png', alt='...')
                |               John.Smith
                b.caret
              |
              ul.dropdown-menu.animated.fadeInRight
                li
                  span.arrow.top
                  |
                  a(href='#') Settings
                |
                li
                  a(href='profile.html') Profile
                |
                li
                  a(href='#')
                    span.badge.bg-danger.pull-right 3
                    |                   Notifications
                |
                li
                  a(href='docs.html') Help
                |
                li.divider
                |
                li
                  a(href='modal.lockme.html', data-toggle='ajaxModal') Logout
      |
      section
        section.hbox.stretch
          // .aside
          aside#nav.bg-black.dk.aside.hidden-print
            section.vbox
              section.w-f-md.scrollable
                .slim-scroll(data-height='auto', data-disable-fade-out='true', data-distance='0', data-size='10px', data-railopacity='0.2')
                  // nav
                  nav.nav-primary.hidden-xs
                    ul.nav.bg.clearfix
                      li.hidden-nav-xs.padder.m-t.m-b-sm.text-xs.text-muted
                        | Discover
                      |
                      li
                        a(href='index.html')
                          i.icon-disc.icon.text-success
                          |
                          span.font-bold What&apos;s new
                      |
                      li
                        a(href='genres.html')
                          i.icon-music-tone-alt.icon.text-info
                          |
                          span.font-bold Genres
                      |
                      li
                        a(href='events.html')
                          i.icon-drawer.icon.text-primary-lter
                          |
                          b.badge.bg-primary.pull-right 6
                          |
                          span.font-bold Events
                      |
                      li
                        a(href='listen.html')
                          i.icon-list.icon.text-info-dker
                          |
                          span.font-bold Listen
                      |
                      li
                        a(href='video.html', data-target='#content', data-el='#bjax-el', data-replace='true')
                          i.icon-social-youtube.icon.text-primary
                          |
                          span.font-bold Video
                      |
                      li.m-b.hidden-nav-xs
                    |
                    ul.nav(data-ride='collapse')
                      li.hidden-nav-xs.padder.m-t.m-b-sm.text-xs.text-muted
                        | Interface
                      |
                      li
                        a.auto(href='#')
                          span.pull-right.text-muted
                            i.fa.fa-angle-left.text
                            |
                            i.fa.fa-angle-down.text-active
                          |
                          i.icon-screen-desktop.icon
                          |
                          span Layouts
                        |
                        ul.nav.dk.text-sm
                          li
                            a.auto(href='layout-color.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Color option
                          |
                          li
                            a.auto(href='layout-boxed.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Boxed layout
                          |
                          li
                            a.auto(href='layout-fluid.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Fluid layout
                      |
                      li
                        a.auto(href='#')
                          span.pull-right.text-muted
                            i.fa.fa-angle-left.text
                            |
                            i.fa.fa-angle-down.text-active
                          |
                          i.icon-chemistry.icon
                          |
                          span UI Kit
                        |
                        ul.nav.dk.text-sm
                          li
                            a.auto(href='buttons.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Buttons
                          |
                          li
                            a.auto(href='icons.html')
                              b.badge.bg-info.pull-right 369
                              |
                              |
                              i.fa.fa-angle-right.text-xs
                              |
                              span Icons
                          li
                            a.auto(href='http://www.weidea.net')
                              b.badge.bg-info.pull-right 369
                              |
                              |
                              i.fa.fa-angle-right.text-xs
                              |
                              span More
                          |
                          li
                            a.auto(href='grid.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Grid
                          |
                          li
                            a.auto(href='widgets.html')
                              b.badge.bg-dark.pull-right 8
                              |
                              |
                              i.fa.fa-angle-right.text-xs
                              |
                              span Widgets
                          |
                          li
                            a.auto(href='components.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Components
                          |
                          li
                            a.auto(href='list.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span List group
                          |
                          li
                            a.auto(href='#table')
                              span.pull-right.text-muted
                                i.fa.fa-angle-left.text
                                |
                                i.fa.fa-angle-down.text-active
                              |
                              |
                              i.fa.fa-angle-right.text-xs
                              |
                              span Table
                            |
                            ul.nav.dker
                              li
                                a(href='table-static.html')
                                  i.fa.fa-angle-right
                                  |
                                  span Table static
                              |
                              li
                                a(href='table-datatable.html')
                                  i.fa.fa-angle-right
                                  |
                                  span Datatable
                          |
                          li
                            a.auto(href='#form')
                              span.pull-right.text-muted
                                i.fa.fa-angle-left.text
                                |
                                i.fa.fa-angle-down.text-active
                              |
                              |
                              i.fa.fa-angle-right.text-xs
                              |
                              span Form
                            |
                            ul.nav.dker
                              li
                                a(href='form-elements.html')
                                  i.fa.fa-angle-right
                                  |
                                  span Form elements
                              |
                              li
                                a(href='form-validation.html')
                                  i.fa.fa-angle-right
                                  |
                                  span Form validation
                              |
                              li
                                a(href='form-wizard.html')
                                  i.fa.fa-angle-right
                                  |
                                  span Form wizard
                          |
                          li
                            a.auto(href='chart.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Chart
                          |
                          li
                            a.auto(href='portlet.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Portlet
                          |
                          li
                            a.auto(href='timeline.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Timeline
                      |
                      li.active
                        a.auto(href='#')
                          span.pull-right.text-muted
                            i.fa.fa-angle-left.text
                            |
                            i.fa.fa-angle-down.text-active
                          |
                          i.icon-grid.icon
                          |
                          span Pages
                        |
                        ul.nav.dk.text-sm
                          li
                            a.auto(href='profile.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Profile
                          |
                          li.active
                            a.auto(href='blog.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Blog
                          |
                          li
                            a.auto(href='invoice.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Invoice
                          |
                          li
                            a.auto(href='gmap.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Google Map
                          |
                          li
                            a.auto(href='jvectormap.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Vector Map
                          |
                          li
                            a.auto(href='signin.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Signin
                          |
                          li
                            a.auto(href='signup.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span Signup
                          |
                          li
                            a.auto(href='404.html')
                              i.fa.fa-angle-right.text-xs
                              |
                              span 404
                    |
                    ul.nav.text-sm
                      li.hidden-nav-xs.padder.m-t.m-b-sm.text-xs.text-muted
                        span.pull-right
                          a(href='#')
                            i.icon-plus.i-lg
                        |                       Playlist
                      |
                      li
                        a(href='#')
                          i.icon-music-tone.icon
                          |
                          span Hip-Pop
                      |
                      li
                        a(href='#')
                          i.icon-playlist.icon.text-success-lter
                          |
                          b.badge.bg-success.dker.pull-right 9
                          |
                          span Jazz
                  // / nav
              |
              |
              footer.footer.hidden-xs.no-padder.text-center-nav-xs
                .bg.hidden-xs
                  .dropdown.dropup.wrapper-sm.clearfix
                    a.dropdown-toggle(href='#', data-toggle='dropdown')
                      span.thumb-sm.avatar.pull-left.m-l-xs
                        img.dker(src='images/a3.png', alt='...')
                        |
                        i.on.b-black
                      |
                      span.hidden-nav-xs.clear
                        span.block.m-l
                          strong.font-bold.text-lt John.Smith
                          |
                          |
                          b.caret
                        |
                        span.text-muted.text-xs.block.m-l Art Director
                    |
                    ul.dropdown-menu.animated.fadeInRight.aside.text-left
                      li
                        span.arrow.bottom.hidden-nav-xs
                        |
                        a(href='#') Settings
                      |
                      li
                        a(href='profile.html') Profile
                      |
                      li
                        a(href='#')
                          span.badge.bg-danger.pull-right 3
                          |                           Notifications
                      |
                      li
                        a(href='docs.html') Help
                      |
                      li.divider
                      |
                      li
                        a(href='modal.lockme.html', data-toggle='ajaxModal') Logout
          // /.aside
          section#content
            section.vbox
              section.scrollable.wrapper-lg
                .row
                  .col-sm-9
                    .blog-post
                      .post-item
                        .post-media
                          img.img-full(src='images/m42.jpg')
                        |
                        .caption.wrapper-lg
                          h2.post-title
                            a(href='#') 7 things you need to know about the flat design
                          |
                          .post-sum
                            p
                              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat.
                              br
                              br
                              |                           Phasellus at ultricies neque, quis malesuada augue. Donec eleifend condimentum nisl eu consectetur. Integer eleifend, nisl venenatis consequat iaculis, lectus arcu malesuada sem, dapibus porta quam lacus eu neque.
                          |
                          .line.line-lg
                          |
                          .text-muted
                            i.fa.fa-user.icon-muted
                            |  by
                            a.m-r-sm(href='#') Admin
                            |
                            i.fa.fa-clock-o.icon-muted
                            |  Feb 20, 2013
                            |
                            a.m-l-sm(href='#')
                              i.fa.fa-comment-o.icon-muted
                              |  2 comments
                      |
                      .post-item
                        .caption.wrapper-lg
                          h2.post-title
                            a(href='#') Bootstrap 3: What you need to know
                          |
                          .post-sum
                            p
                              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat.
                            |
                            h3 Html5 and CSS3
                            |
                            p
                              | Phasellus at ultricies neque, quis malesuada augue. Donec eleifend condimentum nisl eu consectetur. Integer eleifend, nisl venenatis consequat iaculis, lectus arcu malesuada sem, dapibus porta quam lacus eu neque.
                          |
                          .line.line-lg
                          |
                          .text-muted
                            i.fa.fa-user.icon-muted
                            |  by
                            a.m-r-sm(href='#') Admin
                            |
                            i.fa.fa-clock-o.icon-muted
                            |  Feb 15, 2013
                            |
                            a.m-l-sm(href='#')
                              i.fa.fa-comment-o.icon-muted
                              |  4 comments
                    |
                    .text-center.m-t-lg.m-b-lg
                      ul.pagination.pagination-md
                        li
                          a(href='#')
                            i.fa.fa-chevron-left
                        |
                        li.active
                          a(href='#') 1
                        |
                        li
                          a(href='#') 2
                        |
                        li
                          a(href='#') 3
                        |
                        li
                          a(href='#') 4
                        |
                        li
                          a(href='#') 5
                        |
                        li
                          a(href='#')
                            i.fa.fa-chevron-right
                    |
                    h4.m-t-lg.m-b 3 Comments
                    |
                    section.comment-list.block
                      article#comment-id-1.comment-item
                        a.pull-left.thumb-sm
                          img.img-circle(src='images/a0.png')
                        |
                        section.comment-body.m-b
                          header
                            a(href='#')
                              strong John smith
                            |
                            label.label.bg-info.m-l-xs Editor
                            |
                            |
                            span.text-muted.text-xs.block.m-t-xs
                              | 24 minutes ago
                          |
                          .m-t-sm
                            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum.
                      // .comment-reply
                      article#comment-id-2.comment-item.comment-reply
                        a.pull-left.thumb-sm
                          img.img-circle(src='images/a1.png')
                        |
                        section.comment-body.m-b
                          header
                            a(href='#')
                              strong John smith
                            |
                            label.label.bg-dark.m-l-xs Admin
                            |
                            |
                            span.text-muted.text-xs.block.m-t-xs
                              | 26 minutes ago
                          |
                          .m-t-sm
                            | Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
                      // / .comment-reply
                      article#comment-id-2.comment-item
                        a.pull-left.thumb-sm
                          img.img-circle(src='images/a2.png')
                        |
                        section.comment-body.m-b
                          header
                            a(href='#')
                              strong John smith
                            |
                            label.label.bg-dark.m-l-xs Admin
                            |
                            |
                            span.text-muted.text-xs.block.m-t-xs
                              | 26 minutes ago
                          |
                          blockquote.m-t
                            p
                              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                            |
                            small
                              | Someone famous in
                              cite(title='Source Title') Source Title
                          |
                          .m-t-sm
                            | Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
                    |
                    h4.m-t-lg.m-b Leave a comment
                    |
                    form
                      .form-group.pull-in.clearfix
                        .col-sm-6
                          label Your name
                          |
                          input.form-control(type='text', placeholder='Name')
                        |
                        .col-sm-6
                          label Email
                          |
                          input.form-control(type='email', placeholder='Enter email')
                      |
                      .form-group
                        label Comment
                        |
                        textarea.form-control(rows='5', placeholder='Type your comment')
                      |
                      .form-group
                        button.btn.btn-success(type='submit') Submit comment
                  |
                  .col-sm-3
                    h5.font-bold Categories
                    |
                    ul.list-group
                      li.list-group-item
                        a(href='#')
                          span.badge.pull-right 15
                          |                         Photograph
                      |
                      li.list-group-item
                        a(href='#')
                          span.badge.pull-right 30
                          |                         Life style
                      |
                      li.list-group-item
                        a(href='#')
                          span.badge.pull-right 9
                          |                         Food
                      |
                      li.list-group-item
                        a(href='#')
                          span.badge.pull-right 4
                          |                         Travel world
                    |
                    .tags.m-b-lg.l-h-2x
                      a.label.bg-primary(href='#') Bootstrap
                      |
                      a.label.bg-primary(href='#') Application
                      |
                      a.label.bg-primary(href='#') Apple
                      |
                      a.label.bg-primary(href='#') Less
                      |
                      a.label.bg-primary(href='#') Theme
                      |
                      a.label.bg-primary(href='#') Wordpress
                    |
                    h5.font-bold Recent Posts
                    |
                    div
                      article.media
                        a.pull-left.thumb.thumb-wrapper.m-t-xs
                          img(src='images/m1.jpg')
                        |
                        .media-body
                          a.font-semibold(href='#') Bootstrap 3: What you need to know
                          |
                          .text-xs.block.m-t-xs
                            a(href='#') Travel
                            |  2 minutes ago
                      |
                      .line
                      |
                      article.media.m-t-none
                        a.pull-left.thumb.thumb-wrapper.m-t-xs
                          img(src='images/m2.jpg')
                        |
                        .media-body
                          a.font-semibold(href='#') Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                          |
                          .text-xs.block.m-t-xs
                            a(href='#') Design
                            |  2 hours ago
                      |
                      .line
                      |
                      article.media.m-t-none
                        a.pull-left.thumb.thumb-wrapper.m-t-xs
                          img(src='images/m3.jpg')
                        |
                        .media-body
                          a.font-semibold(href='#') Sed diam nonummy nibh euismod tincidunt ut laoreet
                          |
                          .text-xs.block.m-t-xs
                            a(href='#') MFC
                            |  1 week ago
            |
            a.hide.nav-off-screen-block(href='#', data-toggle='class:nav-off-screen,open', data-target='#nav,html')
    |
    script(src='js/jquery.min.js')
    // Bootstrap
    script(src='js/bootstrap.js')
    // App
    script(src='js/app.js')
    |
    |
    script(src='js/slimscroll/jquery.slimscroll.min.js')
    |
    |
    script(src='js/app.plugin.js')
    |
    script(type='text/javascript', src='js/jPlayer/jquery.jplayer.min.js')
    |
    script(type='text/javascript', src='js/jPlayer/add-on/jplayer.playlist.min.js')
    |
    script(type='text/javascript', src='js/jPlayer/demo.js')
